<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button>{{num}}</button>
</div>
</body>
<script>
    const data = {
		num:10
    }
	const vm = new Vue({
		el:"#root",
        data
	});
	// 1- vm.$data的引用地址与Vue配置对象中的data是一致的。
	// console.log(vm.$data===data);
    // 2- data中的属性都会作为vm的实例属性
	// console.log(vm);
    // 3- 实例下与data名字相同的属性，可以实现响应式
    // vm.num = 200;
    // 4- $data下的属性也是可以实现响应式的
    // vm.$data.num = 900;
    // 5- $data在响应式当中扮演了一个数据观察对象的角色。
</script>
</html>